<script>
export default {
  name: "scenic",
  props: {
    data: {
      default: () => ({})
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.data.Id);
    }
  }
}
</script>

<template>
  <view class="scenic-container" @click="handleClick">
    <!-- 门票信息 -->
    <view class="ticket-info">
      <!-- 名称 -->
      <view class="ticket-name">{{data.Name}}</view>
      
      <!-- 标签 -->
<!--      <view class="tag-wrap">-->
<!--        <text class="tag">{{data.Tags}}</text>-->
<!--      </view>-->
      
      <!-- 销售信息 -->
<!--      <view class="sales-info">-->
<!--        <text class="sold">已售{{data.SalesCount || 85}}套</text>-->
<!--        <text class="details">参数须知 ></text>-->
<!--      </view>-->
    </view>
    
    <!-- 价格和抢购 -->
    <view class="price-action">
      <view class="price">
        <text class="symbol">¥</text>
        <text class="value">{{data.ShowPrice || '-'}}</text>
<!--        <text class="market-price" v-if="data.MarketPrice">¥{{data.MarketPrice}}</text>-->
      </view>
      <view class="buy-btn">抢</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.scenic-container {
  width: 100%;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  
  // 门票信息区域
  .ticket-info {
    flex: 1;
    overflow: hidden;
    
    // 门票名称
    .ticket-name {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 16rpx;
      line-height: 1.3;
    }
    
    // 标签容器
    .tag-wrap {
      margin-bottom: 16rpx;
      
      // 标签样式
      .tag {
        display: inline-block;
        font-size: 22rpx;
        color: #FF9A4C;
        background-color: rgba(255, 154, 76, 0.1);
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
      }
    }
    
    // 销售信息
    .sales-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 320rpx;
      
      // 已售数量
      .sold {
        font-size: 24rpx;
        color: #999;
      }
      
      // 详情链接
      .details {
        font-size: 24rpx;
        color: #4A90E2;
      }
    }
  }
  
  // 价格和抢购按钮区
  .price-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 20rpx;
    
    // 价格
    .price {
      .symbol {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
      }
      
      .value {
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
      }
      
      .market-price {
        font-size: 22rpx;
        color: #999;
        text-decoration: line-through;
        margin-left: 8rpx;
      }
    }
    
    // 抢购按钮
    .buy-btn {
      width: 56rpx;
      height: 56rpx;
      background: linear-gradient(-40deg, #FF6B0D, #FA452D);
      color: #fff;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16rpx 4rpx 16rpx 4rpx;
      box-shadow: 2rpx 2rpx 5rpx 0 rgba(252, 86, 31, 0.51);
    }
  }
}
</style>